<template>
    <div class="mini-music-player" :class="{ 'collapsed': isPlayerCollapsed }" v-if="currentSong && currentSong.id">
        <audio ref="audioPlayer" :src="currentSongUrl" @timeupdate="onTimeUpdate" @ended="onEnded"
            @canplay="onCanPlay"></audio>

        <div class="song-cover" @click="openMusicDetail">
            <img :src="currentSong.cover" :class="{ 'playing': isPlaying }" alt="cover">
        </div>

        <div class="player-content">
            <div class="song-info">
                <div class="song-name-and-lyric">
                    <transition name="slide-up" mode="out-in">
                        <p :key="currentLyricText" class="lyric-line">{{ currentLyricText }}</p>
                    </transition>
                </div>
                <div class="song-artist">
                    <span v-for="(artist, index) in currentSong.artists" :key="artist.id">
                        <a @click.prevent="showArtistTopSongs(artist.id)" class="artist-link">{{ artist.name }}</a>
                        <span v-if="index < currentSong.artists.length - 1"> / </span>
                    </span>
                </div>
            </div>

            <div class="controls">
                <button class="control-btn" @click.stop="prevSong" aria-label="上一首">
                    <svg class="control-icon" viewBox="0 0 24 24">
                        <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"></path>
                    </svg>
                </button>
                <button class="control-btn play-pause-btn" @click.stop="togglePlay" aria-label="播放/暂停">
                    <svg v-if="!isPlaying" class="control-icon" viewBox="0 0 24 24">
                        <path d="M8 5v14l11-7z"></path>
                    </svg>
                    <svg v-else class="control-icon" viewBox="0 0 24 24">
                        <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path>
                    </svg>
                </button>
                <button class="control-btn" @click.stop="nextSong" aria-label="下一首">
                    <svg class="control-icon" viewBox="0 0 24 24">
                        <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"></path>
                    </svg>
                </button>
            </div>
        </div>
        <div class="collapse-toggle" @click.stop="togglePlayerCollapse">
            <i :class="['arrow', isPlayerCollapsed ? 'arrow-right' : 'arrow-left']"></i>
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from "vuex";

export default {
    name: "MusicPlayer",
    computed: {
        ...mapState("music", ["isPlaying", "isPlayerCollapsed", "parsedLyric", "currentLyricLine"]),
        ...mapGetters("music", ["currentSong", "currentSongUrl"]),
        currentLyricText() {
            if (this.isPlaying && this.parsedLyric && this.parsedLyric[this.currentLyricLine]) {
                const lyric = this.parsedLyric[this.currentLyricLine].text;
                // 如果歌词为空，显示歌曲名
                return lyric.trim() ? lyric : this.currentSong.name;
            }
            return this.currentSong.name;
        }
    },
    watch: {
        isPlaying(newVal) {
            if (newVal) {
                this.$nextTick(() => {
                    if (this.currentSongUrl) {
                        this.$refs.audioPlayer.play().catch(e => console.error("播放失败:", e));
                    }
                });
            } else {
                this.$refs.audioPlayer.pause();
            }
        },
        currentSongUrl(newUrl) {
            if (newUrl && this.isPlaying) {
                this.$nextTick(() => {
                    this.$refs.audioPlayer.play().catch(e => console.error("播放失败:", e));
                });
            }
        }
    },
    methods: {
        ...mapActions("music", ["togglePlay", "nextSong", "prevSong", "openMusicDetail", "togglePlayerCollapse", "updateCurrentTime"]),
        showArtistTopSongs(artistId) {
            this.$store.dispatch('music/loadArtistTopSongs', artistId);
        },
        onTimeUpdate(e) {
            this.updateCurrentTime(e.target.currentTime);
            if (!this.$store.state.music.duration) {
                this.$store.commit('music/SET_DURATION', e.target.duration);
            }
        },
        onEnded() {
            this.nextSong(); // 播放结束后自动下一曲
        },
        onCanPlay() {
            if (this.isPlaying) {
                this.$refs.audioPlayer.play().catch(e => console.error("播放失败:", e));
            }
            this.$store.commit('music/SET_DURATION', this.$refs.audioPlayer.duration);
        }
    },
};
</script>

<style lang="scss" scoped>
.mini-music-player {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 300px;
    height: 80px;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    padding: 10px 15px;
    z-index: 1000;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);

    &.collapsed {
        width: 80px;
        padding: 10px;

        .player-content {
            opacity: 0;
            width: 0;
            overflow: hidden;
        }
    }
}

.player-content {
    display: flex;
    flex-grow: 1;
    align-items: center;
    min-width: 0;
    opacity: 1;
    transition: opacity 0.4s ease, width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.collapse-toggle {
    width: 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 0;
    color: #333;

    .arrow {
        border: solid currentColor;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 4px;
        transition: transform 0.3s ease;
    }

    .arrow-right {
        transform: rotate(-45deg);
    }

    .arrow-left {
        transform: rotate(135deg);
    }
}

.song-cover {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;

    &:hover {
        transform: scale(1.05);
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;

        &.playing {
            animation: rotate 12s linear infinite;
        }
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.song-info {
    flex-grow: 1;
    margin: 0 12px;
    overflow: hidden;

    p {
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.song-name-and-lyric {
    height: 20px;
    position: relative;
    font-size: 15px;
    font-weight: 600;
    color: #111;

    .lyric-line {
        position: absolute;
        width: 100%;
        transition: all 0.5s ease-in-out;
    }
}

.slide-up-enter-active,
.slide-up-leave-active {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide-up-enter {
    transform: translateY(20px);
    opacity: 0;
}

.slide-up-leave-to {
    transform: translateY(-20px);
    opacity: 0;
}

.song-artist {
    font-size: 13px;
    color: #555;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    .artist-link {
        color: inherit;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

.controls {
    display: flex;
    align-items: center;

    .control-btn {
        background: none;
        border: none;
        padding: 5px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: background-color 0.2s ease;

        &:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }
    }

    .control-icon {
        width: 22px;
        height: 22px;
        fill: #333;
    }

    .play-pause-btn {
        .control-icon {
            width: 28px;
            height: 28px;
        }
    }
}
</style>